<template>
  <div>
    <vxe-toolbar>
      <template #buttons> 
        <vxe-form :data="formData">
          <vxe-form-item title="名称" field="name" :span="8" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.name" placeholder="请输入名称" clearable></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="昵称" field="nickname" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.nickname" placeholder="请输入昵称"></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="性别" field="sex" :item-render="{}">
            <template #default="{ data }">
              <vxe-select v-model="data.sex" placeholder="请选择性别" clearable>
                <vxe-option value="1" label="女"></vxe-option>
                <vxe-option value="2" label="男"></vxe-option>
              </vxe-select>
            </template>
          </vxe-form-item>
          <vxe-form-item>
              <vxe-button type="submit" status="primary">查询</vxe-button>
          </vxe-form-item>
        </vxe-form>
      </template>
    </vxe-toolbar>

    <vxe-grid
      :data="tabalData"
      :columns="columns"
      align="center"
      :edit-config="{
        trigger: 'dblclick',
        mode: 'row',
        showStatus: true,
      }"
    >
      <template #operation="{ row }">
        <vxe-button
          status="primary"
          content="编辑"
          @click="primaryBtn(row)"
        ></vxe-button>
        <vxe-button
          status="danger"
          content="删除"
          @click="deleteBtn(row)"
        ></vxe-button>
      </template>
    </vxe-grid>

    <vxe-pager
      background
      :current-page="page.currentPage"
      :page-size="page.pageSize"
      :total="page.totalResult"
      @page-change="pageChange"
      :layouts="[
        'PrevJump',
        'PrevPage',
        'JumpNumber',
        'NextPage',
        'NextJump',
        'Sizes',
        'FullJump',
        'Total',
      ]"
    >
    </vxe-pager>
  </div>
</template>

<script>
export default {
  data() {
    return {
        formData:{
            name:'',
            nickname:'',
            sex:''
        },
      tabalData: [
        {
          name: "s",
          email: "s",
          nickname: "f",
          role: "g",
          sex: "g",
          age: "d",
          amount: "2",
        },
        {
          name: "s",
          email: "s",
          nickname: "f",
          role: "g",
          sex: "g",
          age: "d",
          amount: "2",
        },
      ],
      columns: [
        { type: "checkbox", width: 120 },
        {
          field: "name",
          title: "Name",
          sortable: true,
          titleHelp: { message: "名称必须填写！" },
          editRender: { name: "input", attrs: { placeholder: "请输入名称" } },
        },
        {
          field: "role",
          title: "Role",
          sortable: true,
          filters: [
            { label: "前端开发", value: "前端" },
            { label: "后端开发", value: "后端" },
            { label: "测试", value: "测试" },
            { label: "程序员鼓励师", value: "程序员鼓励师" },
          ],
          filterMultiple: false,
          editRender: { name: "input", attrs: { placeholder: "请输入角色" } },
        },
        {
          field: "email",
          title: "Email",
          width: 160,
          editRender: { name: "$input", props: { placeholder: "请输入邮件" } },
        },
        {
          field: "nickname",
          title: "Nickname",
          editRender: { name: "$input", attrs: { placeholder: "请输入昵称" } },
        },
        {
          field: "sex",
          title: "Sex",
          filters: [
            { label: "男", value: "1" },
            { label: "女", value: "0" },
          ],
          editRender: {
            name: "$select",
            options: [],
            props: { placeholder: "请选择性别" },
          },
        },
        {
          field: "age",
          title: "Age",
          sortable: true,
          editRender: {
            name: "$input",
            props: { type: "number", min: 1, max: 120 },
          },
        },
        {
          field: "amount",
          title: "Amount",
          formatter: this.formatAmount,
          editRender: {
            name: "$input",
            props: { type: "float", digits: 2, placeholder: "请输入数值" },
          },
        },
        {
          title: "操作",
          width: "160",
          slots: { default: "operation" },
        },
      ],
      page: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 0,
      },
    };
  },
  created() {},
  methods: {
    //分页触发事件
    pageChange({ currentPage, pageSize }) {
      this.page.pageSize = pageSize;
      this.page.currentPage = currentPage;
      // 请求列表数据刷新列表
    },
    // 显示之前做什么，如是id但是需要显示name
    formatAmount({ cellValue }) {},
    primaryBtn(row) {},
    deleteBtn(row) {
      this.$msgbox({
        message: "您确定要删除吗",
        title: "确认删除",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        showCancelButton: true,
        type: "error",
      })
        .then(() => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
        })
        .catch(() => {
          this.$message({
            message: "取消删除",
            type: "info",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>